<template>
    <addEditLookAssetsDetail ref="addEditLookAssetsDetail" />
    <addEditApproveDetail ref="addEditApproveDetail" />
    <lookAttachmentView ref="lookAttachmentView" />

    <el-main>
        <div class="teacher">
            <div class="app-table">
                <div class="app-body">
                    <div class="app-search">
                        <el-form :inline="true" class="demo-form-inline" v-model="form">
                            <el-form-item label="批次名称">
                                <el-input placeholder="请输入批次名称" v-model="form.agreementName"
                                    @keyup.enter="searchEnter"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="serach_btn" type="primary" @click="onSubmit"
                                    @keyup.enter="searchEnter">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName">
                        <el-table-column prop="id" label="id" width="80" />
                        <el-table-column prop="agreementName" label="批次名称" />
                        <el-table-column prop="realTeacherName" label="审批人" />
                        <el-table-column prop="createTime" label="创建日期" />
                        <el-table-column prop="remark" label="备注" />

                        <el-table-column prop="status" label="审批状态">
                            <template style="display: block" #default="scope">
                                <p style="margin: 0;" v-if="scope.row.status == 0">未审批</p>
                                <p style="margin: 0;" v-if="scope.row.status == 1">已通过</p>
                                <p style="margin: 0;" v-if="scope.row.status == 2">已驳回</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="380px">
                            <template style="display: block" #default="scope">
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="lookDetail(scope.row)">查看资产
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="lookAccessory(scope.row)">查看附件
                                </el-button>
                                <el-button class="edit_btn" size="small" type="success"
                                    @click="downloadReceipt(scope.row)">下载验收单
                                </el-button>
                                <el-button class="edit_btn" size="small" type="danger" v-if="scope.row.status == 0"
                                    @click="addApprove(scope.row)">审批
                                </el-button>
                            </template>
                        </el-table-column>
                        <template v-slot:empty>
                            <el-empty description="暂无数据"></el-empty>
                        </template>
                    </el-table>
                    <el-config-provider :locale="locale">
                        <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                            @current-change="changeCurrentPage">
                        </el-pagination>
                    </el-config-provider>
                </div>
                <bottomView />
            </div>
        </div>
    </el-main>
</template>
<script>
import addEditLookAssetsDetail from "@/components/assets/addEditLookAssetsDetail.vue";
import addEditApproveDetail from "@/components/assets/addEditApproveDetail.vue";
import lookAttachmentView from "@/components/assets/lookAttachmentView.vue";
import { ElConfigProvider, ElMessageBox, ElMessage, ElLoading } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload, Close, } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";
import esign from "../../components/questionnaire/esign.vue";

export default {
    name: "FaProjectListView",
    data() {
        return {
            type: 0,
            title: "",
            page: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            expandPage: 1,
            expandPageSize: 10,
            expandTotal: 0,
            expandLimit: 10,
            rowData: null,
            expandedRowsData: null,
            list: [],
            assetsList: [],
            expandedRowKeys: [],
            form: {
                company: "",
            },
            addFaProjectForm: {
                agreementName: "",
                sourceOfFunds: "财政拨款",
                sourceOfAssets: "采购",
                remark: "",

            },
            addAssetsForm: {
                name: "",
            },

        };
    },
    components: {
        addEditLookAssetsDetail,
        addEditApproveDetail,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload,
        bottomView, Close, lookAttachmentView,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getMyApproveList();
    },

    watch: {
        $route() {
            this.getMyApproveList();
        },
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getMyApproveList();
            }
        },
        lookDetail(obj) {
            this.$refs.addEditLookAssetsDetail.title = "查看资产"
            this.$refs.addEditLookAssetsDetail.personnelType = this.type
            this.$refs.addEditLookAssetsDetail.dialogFormVisible = true;
            this.$refs.addEditLookAssetsDetail.id = obj.projectId;
            this.$refs.addEditLookAssetsDetail.getAssetsDetailList(obj.projectId)
        },
        lookAccessory(obj) {
            console.log(222, obj);
            this.$refs.lookAttachmentView.title = "查看附件"
            // this.$refs.lookAttachmentView.personnelType = this.type
            this.$refs.lookAttachmentView.dialogFormVisible = true;
            this.$refs.lookAttachmentView.id = obj.projectId;
            this.$refs.lookAttachmentView.getFile(obj)
        },
        addApprove(obj) {
            this.$refs.addEditApproveDetail.title = "审批"
            this.$refs.addEditApproveDetail.dialogFormVisible = true;
            this.$refs.addEditApproveDetail.id = obj.id;
            this.$refs.addEditApproveDetail.projectId = obj.projectId;
            this.$refs.addEditApproveDetail.getEsign()
        },
        downloadReceipt(arr) {
            var loadingInstance = ElLoading.service({
                lock: true, text: '加载中', background: 'rgba(0, 0, 0, 0.7)',
            });
            httpService(`/javaApi/faProject/exportFaProjectCheck/` + arr.projectId, {}, "get").then(
                (data) => {
                    loadingInstance.close()
                    if (data.code === 1) {
                        window.location.href = data.msg
                    }
                }
            );
        },

        reloadData() {
            this.page = 1;
            this.getMyApproveList()
        },
        onSubmit() {
            this.getMyApproveList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getMyApproveList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getMyApproveList();
        },
        changePageSize1(size) {
            this.expandPageSize = size;
            this.expandLimit = size;
            this.handleExpandChange(this.rowData, this.expandedRowsData);
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage1(page) {
            this.expandPage = page;
            this.handleExpandChange(this.rowData, this.expandedRowsData);
        },
        tableRowClassName({ row, rowIndex }) {
            return "";
        },
        getMyApproveList(id) {
            httpService(
                "/javaApi/faProjectApprove/myList/" + this.page + "/" + this.pageSize,
                {
                    // "agreementName": this.form.agreementName,
                },
                "get"
            ).then((data) => {
                if (data.list) {
                    data.list.map(item => {
                        return item.createTime = item.createTime.slice(0, 10)
                    })
                }
                this.list = data.list;
                this.total = data.total;
                this.pageCount = data.pages;
            });
        },

    },
};
</script>
<style scoped>
.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    background: #eff3f5;
    padding: 10px;
}

.app_add {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
}

.app-search {
    padding: 10px;
    background-color: #fff !important;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    padding: 0px 20px 10px 20px;
    margin-bottom: 10px;
    min-height: calc(100vh - 224px);
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-lighter);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-lighter);
}

.el-pagination {
    text-align: center;
    padding: 20px 10px;
    background-color: #fff;
}

.serach_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.edit_btn {
    background-color: #fff;
    color: #007EFF;
    border: none;
}

.del_btn {
    background-color: #fff;
    color: #FF0000;
    border: none;
}

.tabs_box {
    background-color: #ffffff;
    width: 98%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    padding: 10px 0 0 25px;
    /* padding: 10px 0 0 2%; */
    border-radius: 5px 5px 0 0;
}

.tab_card {
    height: 35px;
    width: 100px;
    display: flex;
    font-size: 14px;
    align-items: center;
    justify-content: space-around;
    border: 1px solid rgb(228, 231, 237);
    box-sizing: border-box;
    margin-right: -1px;
    cursor: pointer;
}

.tab_card .el-icon {
    font-size: 16px;
}

/* .tab_card:first-child {
    border-radius: 6px 0 0 0;
}
.tab_card:last-child {
    border-radius: 0 6px 0 0;
} */

.tab_card_color {
    color: rgb(64, 158, 255);
}

#true {
    color: rgb(64, 158, 255);

}
</style>
